<template>
	<div>
		<el-form :model="queryForm" label-width="120px" :inline="true">
		  <el-form-item label="角色名称">
			<el-input v-model="queryForm.roleName" clearable />
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="init()">查询</el-button>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="saveDialog = true">新增</el-button>
		  </el-form-item>
		</el-form>
	</div>
	<div style="margin-top: 1%;">
	<el-table :data="tableData" style="width: 100%">
	  <el-table-column prop="roleName" label="角色名称" width="180" />
	<el-table-column prop="createTime" label="创建时间" width="180" />
	<el-table-column prop="updateTime" label="修改时间" width="180" />
	<el-table-column label="操作">
	  <template #default="scope">
		<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
		  >修改</el-button
		>
		<el-button
		  size="small"
		  type="danger"
		  @click="handleDelete(scope.$index, scope.row.id)"
		  >删除</el-button
		>
	  </template>
	</el-table-column>
	</el-table>
	</div>
	
	<div style="margin-top: 3%;">
		  <el-pagination background layout="prev, pager, next, total, sizes" 
			:total="total" 
			v-model:current-page="page" 
			:page-sizes="[10, 20, 50]" 
			v-model:page-size="pageSize"
			@size-change="init"
			@current-change="init"
			/>
		</div>
		
		
	<el-dialog v-model="saveDialog" title="新增角色">
	    <el-form :model="saveForm">
	      <el-form-item label="角色名称" :label-width="formLabelWidth">
	        <el-input v-model="saveForm.roleName" autocomplete="off" clearable required show-message="名称不能为空"/>
	      </el-form-item>
	      <el-form-item label="绑定菜单" :label-width="formLabelWidth">
	        <el-select
	              v-model="saveForm.menuIds"
	              multiple
	              placeholder="Select"
	              style="width: 240px"
	            >
	              <el-option
	                v-for="item in menuList"
	                :key="item.id"
	                :label="item.menuName"
	                :value="item.id"
	              />
	            </el-select>
		</el-form-item>
	    </el-form>
		  <template #footer>
		    <span class="dialog-footer">
		      <el-button @click="saveDialog = false">取消</el-button>
		      <el-button type="primary" @click="saveHandler()">
		        确定
		      </el-button>
		    </span>
		  </template>
	  </el-dialog>
	  
	  <el-dialog v-model="updateDialog" title="修改角色">
	      <el-form :model="updateForm">
	        <el-form-item label="角色名称" :label-width="formLabelWidth">
	          <el-input v-model="updateForm.roleName" autocomplete="off" clearable required show-message="名称不能为空"/>
	        </el-form-item>
	        <el-form-item label="绑定菜单" :label-width="formLabelWidth">
	        <el-select
	              v-model="updateForm.menuIds"
	              multiple
	              placeholder="Select"
	              style="width: 240px"
	            >
	              <el-option
	                v-for="item in menuList"
	                :key="item.id"
	                :label="item.menuName"
	                :value="item.id"
	              />
	            </el-select>
				</el-form-item>
	      </el-form>
	  	  <template #footer>
	  	    <span class="dialog-footer">
	  	      <el-button @click="updateDialog = false">取消</el-button>
	  	      <el-button type="primary" @click="updateHandler()">
	  	        确定
	  	      </el-button>
	  	    </span>
	  	  </template>
	    </el-dialog>
</template>

<script>
	import { ElMessageBox } from 'element-plus'
export default {
	name: 'goodsType',
	created() {
	    this.init()
		this.initMenu()
	},
	data() {
		return {
			tableData: [],
			total: 0,
			page: 1,
			pageSize: 20,
			saveDialog: false,
			updateDialog: false,
			formLabelWidth: '100px',
			goodsTypeList: [],
			queryForm: {
				roleName: ''
			},
			saveForm: {
				roleName: '',
				menuIds: []
			},
			updateForm: {
				id: 0,
				roleName: '',
				menuIds: []
			},
			menuList: []
		}
	},
	methods: {
		init() {
			this.$axios.post('sys/role/list',
			{
				menuName: this.$data.queryForm.menuName,
				page: this.$data.page,
				pageSize: this.$data.pageSize
			})
			.then(response => {
				this.$data.tableData = response.list
				this.$data.total = response.total
			}).catch(error => {
				console.log(error)
			})
		},
		initMenu() {
			this.$axios.get('sys/menu/all')
			.then(response => {
				this.$data.menuList = response
			}).catch(error => {
				console.log(error)
			})
		},
		saveHandler() {
			this.$axios.post('sys/role/save',
			this.$data.saveForm
			)
			.then(response => {
				this.msg.info('角色添加成功')
				this.init()
				this.$data.saveForm = {}
				this.$data.saveDialog = false
			}).catch(error => {
				console.log(error)
			})
		},
		updateHandler() {
			this.$axios.post('sys/role/update',
			this.$data.updateForm
			)
			.then(response => {
				this.msg.info('角色修改成功')
				this.init()
				this.$data.updateForm = {}
				this.$data.updateDialog = false
			}).catch(error => {
				console.log(error)
			})
		},
		handleEdit(idx, rowData) {
			console.log(rowData)
			
			Object.assign(this.$data.updateForm, rowData)
			//this.$data.updateForm = rowData
			// this.$data.updateForm.id = rowData.id
			// this.$data.updateForm.
			this.$data.updateDialog = true
		},
		handleDelete(idx, id) {
			ElMessageBox.confirm(
				'确定要删除当前角色吗?',
				'Warning',
				{
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning',
				}
			  )
				.then(() => {
				  this.$axios.delete('sys/role/delete/' + id)
				  .then(response => {
				  	this.msg.info('角色删除成功')
				  	this.init()
				  }).catch(error => {
				  	console.log(error)
				  })
				})
				.catch(() => {
				 //  ElMessage({
					// type: 'info',
					// message: 'Delete canceled',
				 //  })
				})
			
		}
	}
}
</script>

<style>
</style>